<template>
  <div v-if="type === 'simple'" class="member simple">亲爱的{{ user.name }}，您的积分为：{{ user.point || 0 }}积分</div>
  <div v-else class="member detail">
	<div class="info-1">
		<div class="member-level">
			<img class="member-level-icon" src="https://xishifile.oss-cn-hangzhou.aliyuncs.com/202307/23/level.png" />
			普通会员
		</div>
		<div class="member-number">
			现在积分 {{ user.point || 0 }} 分
		</div>
	</div>
	<div class="info-2" @click="goTo()">
		查看详情
		<div class="to-detail">
			<u-icon name="arrow-right" color="#282828" size="10" :bold="true"></u-icon>
		</div>
	</div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import {useSystemInfo} from '@/hooks/useSystemInfo';
import {useRouter} from '@/hooks/useRouter';
import { getStorageUserInfo } from '@/hooks/useLogin'
import { getUserinfo } from '@/api'

const router = useRouter();

const {getSafeTop} = useSystemInfo();

// const user = getStorageUserInfo()

const user = ref({
	name: '',
	point: 0
})


defineProps({
  type: {
    type: String,
    default: 'simple', // 'simple' | 'detail'
  },
});

const goTo = () => {
  router.push({
    path: '/pages/integralDetails/index',
  });
}

onMounted(async () => {
	const res = await getUserinfo({})
	user.value = res || {}
})

</script>

<style lang="less" scoped>
.member {
	font-size: 14px;
	&.simple {
		width: 100%;
		height: 30px;
		background: black;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		z-index: 999;
		position: absolute;
		left: 0;
	}

	&.detail {
		width: 100%;
		height: 72px;
		background: black;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 12px;
		box-sizing: border-box;
		.info-1 {
			.member-level {
				display: flex;
				align-items: center;
				margin-bottom: 8px;
				.member-level-icon {
					width: 20px;
					height: 20px;
				}
			}
		}
		.info-2 {
			display: flex;
			align-items: center;
			font-size: 12px;
			.to-detail {
				width: 16px;
				height: 16px;
				border-radius: 50%;
				background: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 4px;
			}
		}
	}
}
</style>
